```jsx
import * as navigationMenu from "@zag-js/navigation-menu"
import { useMachine, normalizeProps } from "@zag-js/react"
import { useId } from "react"

export function NavigationMenu() {
  const service = useMachine(navigationMenu.machine, { id: useId() })
  const api = navigationMenu.connect(service, normalizeProps)

  return (
    <nav {...api.getRootProps()}>
      <div {...api.getIndicatorTrackProps()}>
        <ul {...api.getListProps()}>
          {/* Item with trigger */}
          <li {...api.getItemProps({ value: "products" })}>
            <button {...api.getTriggerProps({ value: "products" })}>
              Products
            </button>
            {/* Focus management proxies */}
            <span {...api.getTriggerProxyProps({ value: "products" })} />
            <span {...api.getViewportProxyProps({ value: "products" })} />
          </li>

          {/* Simple link */}
          <li {...api.getItemProps({ value: "pricing" })}>
            <a {...api.getLinkProps({ value: "pricing" })} href="/pricing">
              Pricing
            </a>
          </li>

          {/* Indicator */}
          <div {...api.getIndicatorProps()}>
            <div {...api.getArrowProps()} />
          </div>
        </ul>
      </div>

      {/* Shared viewport for all content */}
      <div {...api.getViewportPositionerProps()}>
        <div {...api.getViewportProps()}>
          {/* Content for products */}
          <div {...api.getContentProps({ value: "products" })}>
            <a {...api.getLinkProps({ value: "products" })} href="/analytics">
              Analytics
            </a>
            <a {...api.getLinkProps({ value: "products" })} href="/marketing">
              Marketing
            </a>
          </div>
        </div>
      </div>
    </nav>
  )
}
```
